<!-- src/views/ParentView.vue -->
<template>
  <div>
    <h2>👨 爸爸在这里</h2>
    <p>孩子对我说：「{{ messageFromChild }}」</p>

    <!-- 🎯 使用子组件，并监听它发射的事件 -->
    <ChildButton @greet="handleGreet" @farewell="handleFarewell" />
  </div>
</template>

<script setup>
import ChildButton from '@/components/ChildButton.vue'
import { ref } from 'vue'

// 存储孩子发来的消息
const messageFromChild = ref('（等待孩子说话...）')

// 处理 greet 事件
function handleGreet(msg) {
  messageFromChild.value = msg
}

// 处理 farewell 事件
function handleFarewell(msg) {
  messageFromChild.value = msg
}
</script>

<style scoped>
h2 {
  color: #2c3e50;
}
p {
  font-size: 18px;
  margin: 20px 0;
  padding: 10px;
  background: #f8f9fa;
  border-left: 4px solid #3498db;
}
</style>
